<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员管理 - 汽车维修与客户信息管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>

        .navbar {
            border-radius: 10px;
            background-color: #343a40;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            transition: all 0.3s ease-in-out;
        }

        .navbar:hover {
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        /* 增加一些 padding 和 margin 让内容不那么拥挤 */
        .navbar-brand {
            font-weight: bold;
            font-size: 1.25rem;
            color: #ffffff;
            text-transform: uppercase;
            transition: color 0.3s ease;
        }

        .navbar-brand:hover {
            color: #2980b9;
        }

        /* 菜单项样式 */
        .navbar-nav .nav-item .nav-link {
            color: #ffffff;
            font-weight: 500;
            padding: 12px 8px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .navbar-nav .nav-item .nav-link:hover,
        .navbar-nav .nav-item .nav-link:focus {
            color: #ffffff;
            background-color: #2980b9;
            border-radius: 5px;
        }

        .navbar-nav .nav-item.active .nav-link {
            color: #fff;
            background-color: #2980b9;
            border-radius: 5px;
        }

        /* 用户信息和退出登录 */
        .navbar-nav.ms-auto .nav-link {
            color: #ffffff;
            font-weight: 500;
            padding: 12px 20px;
        }

        .navbar-nav.ms-auto .nav-link:hover {
            background-color: #2ecc71;
            color: #fff;
            border-radius: 5px;
        }

        /* 自适应 */
        @media (max-width: 768px) {
            .navbar-collapse {
                margin-top: 10px;
            }
        }

        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .container {
            max-width: 1270px;
        }

        .card {
            border: none;
            border-radius: 10px;
            box-shadow: var(--shadow);
            margin-bottom: 25px;
            overflow: hidden;
        }

        .card-header {
            background-color: var(--dark-color);
            color: white;
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: none;
        }

        .table-responsive {
            border-radius: 0 0 10px 10px;
            overflow: hidden;
        }

        .table {
            margin-bottom: 0;
        }

        .table thead th {
            background-color: var(--dark-color);
            color: white;
            position: sticky;
            top: 0;
        }

        .table-striped tbody tr:nth-of-type(odd) {
            background-color: rgba(0, 0, 0, 0.02);
        }

        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-primary {
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-outline-danger:hover {
            background-color: #e74c3c;
            color: white;
        }

        .alert {
            border-radius: 8px;
            border: none;
        }

        .input-group {
            box-shadow: var(--shadow);
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
        }

        .badge {
            font-weight: 500;
            padding: 0.5em 0.75em;
        }

        .badge.bg-danger {
            background-color: #e74c3c !important;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .card-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .card-header h5 {
                margin-bottom: 10px;
            }

            .btn-group {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
<div th:insert="~{common/common::topbar}"></div>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-12">
            <!-- 消息提示 -->
            <div class="alert alert-success alert-dismissible fade show" th:if="${success}" role="alert" th:text="${success}">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-danger alert-dismissible fade show" th:if="${error}" role="alert" th:text="${error}">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <div class="alert alert-info alert-dismissible fade show" th:if="${info}" role="alert" th:text="${info}">
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

            <!-- 卡片式布局 -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0"><i class="bi bi-person-gear"></i> 管理员管理</h5>
                    <!-- 仅超级管理员显示新增按钮 -->
                    <a th:if="${session.loginRole == 1}" th:href="@{/admin/add}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> 新增管理员
                    </a>
                </div>

                <div class="card-body">
                    <!-- 搜索表单 -->
                    <div class="mb-4">
                        <form method="get" th:action="@{/admin/search}">
                            <div class="input-group">
                                <input type="text" class="form-control" name="key"
                                       placeholder="搜索用户名或邮箱" th:value="${key}">
                                <button class="btn btn-outline-secondary" type="submit">
                                    <i class="bi bi-search"></i> 搜索
                                </button>
                            </div>
                        </form>
                    </div>

                    <!-- 管理员表格 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead class="table-dark">
                            <tr>
                                <th>ID</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>角色</th>
                                <!-- 仅超级管理员显示操作列 -->
                                <th th:if="${session.loginRole == 1}">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="admin : ${admins}">
                                <td th:text="${admin.id}"></td>
                                <td th:text="${admin.username}"></td>
                                <td th:text="${admin.email ?: '未设置'}"></td>
                                <td>
                                    <span th:if="${admin.role == 1}" class="badge bg-danger">超级管理员</span>
                                    <span th:if="${admin.role == 0}" class="badge bg-primary">普通管理员</span>
                                </td>
                                <!-- 仅超级管理员显示操作按钮 -->
                                <td th:if="${session.loginRole == 1}">
                                    <div class="btn-group btn-group-sm">
                                        <a th:href="@{/admin/edit/{id}(id=${admin.id})}"
                                           class="btn btn-outline-primary">
                                            <i class="bi bi-pencil"></i> 编辑
                                        </a>
                                        <a th:href="@{/admin/delete/{id}(id=${admin.id})}"
                                           class="btn btn-outline-danger"
                                           onclick="return confirm('确定要删除此管理员吗？')">
                                            <i class="bi bi-trash"></i> 删除
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(admins)}">
                                <td th:if="${session.loginRole == 1}" colspan="5" class="text-center text-muted py-4">
                                    <i class="bi bi-exclamation-circle"></i> 没有找到管理员信息
                                </td>
                                <td th:unless="${session.loginRole == 1}" colspan="4" class="text-center text-muted py-4">
                                    <i class="bi bi-exclamation-circle"></i> 没有找到管理员信息
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 自动关闭提示框
        setTimeout(() => {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(alert => {
                new bootstrap.Alert(alert).close();
            });
        }, 5000);
    });
</script>
</body>
</html>